<template>
  <div class="w-[100%]">
    <el-table
      v-loading="loading"
      :data="list"
      @selection-change="handleSelectionChange"
      @expand-change="onExpandChange"
      :expand-row-keys="expandedKeys"
      :row-key="pk"
      :default-expand-all="defaultExpandAll"
    >
      <el-table-column type="selection" width="55" align="center" v-if="showSection"    :reserve-selection="true"/>
      <!--      <el-table-column type="index" label="序号" align="center" v-if="true" width="70px"/>-->
      <el-table-column type="expand" v-if="showExpand">
        <template #default="{ row, $index }">
          <slot name="expand" :row="row" :index="$index"></slot>
        </template>
      </el-table-column>

      <el-table-column
        :label="item?.name"
        align="center"
        :prop="item?.code"
        :width="item.width"
        v-for="(item, index) in thead"
        :key="index"
      >
        <template #default="{ row, $index }">
          <slot :name="item.code" :index="$index" :row="row">{{ item.date ? (row[item.code] && dayjs(row[item.code]).format('YYYY-MM-DD HH:mm:ss')) : row[item.code] }}</slot>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
        :width="`${80 * btns.length}px;`"
        v-if="showAction"
      >
        <template #default="scope">
          <slot name="btn" :row="scope.row" :index="scope.$index">
            <div class="flex-center" v-style="`gap:10px`">
              <span v-for="(item, index) in btns" :key="index" v-style="`gap:10px`">
                <span
                  class="cursor-pointer"
                  :style="`color:${item.color}`"
                  @click="
                    handleClick({
                      row: scope.row,
                      index: scope.$index,
                      code: item.code
                    })
                  "
                >
                  {{ item.name }}
                </span>

                <span v-style="`color:#e7e7e7;margin-left:10px`" v-if="index !== btns.length - 1"
                  >|</span
                >
              </span>
            </div>
          </slot>
        </template>
      </el-table-column>
    </el-table>

    <slot name="total"></slot>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script setup lang="ts">
import dayjs from 'dayjs'

const props = defineProps({
  expandKeys:{
    type:Array,
    required:false,
    default:()=>[]
  },
  modelValue: {
    type: Object,
    default: () => {}
  },
  defaultExpandAll:{
    type:Boolean,
    required:false,
    default:()=>false
  },
  thead: {
    type: Array,
    required: false,
    default: () => []
  },
  btns: {
    type: Array,
    required: false,
    default: () => []
  },
  list: {
    type: Array,
    required: false,
    default: () => []
  },
  loading: {
    type: Boolean,
    required: false,
    default: () => false
  },
  total: {
    type: Number,
    required: false,
    default: () => 0
  },
  params: {
    type: null,
    required: false,
    default: () => ''
  },
  pk: {
    type: String,
    required: false,
    default: () => 'id'
  },
  showAction: {
    type: Boolean,
    default: () => true
  },
  showSection: {
    type: Boolean,
    default: () => true
  },
  showExpand: {
    type: Boolean,
    default: () => false
  }
})

const emit = defineEmits(['execute', 'update:modelValue'])

const single = ref(true)
const multiple = ref(true)

const expandedKeys = ref([])

const queryParams = ref({
  pageNo: 1,
  pageSize: 10
})

const getList = () => {
  emit('execute', {
    type: 'pagination',
    data: {
      params: props.params,
      queryParams: queryParams.value
    }
  })
}

const handleSelectionChange = (selection) => {
  let ids = selection.map((item) => item[props.pk])
  single.value = selection.length != 1
  multiple.value = !selection.length

  emit('execute', {
    type: 'selectionChange',
    data: {
      params: props.params,
      ids
    }
  })
}

const onExpandChange = (row, expanded) => {
  expandedKeys.value = expanded.map((item) => {
    return item[props.pk]
  })
}

const handleClick = ({ row, index, code }) => {
  emit('execute', {
    type: code,
    data: {
      params: props.params,
      row,
      index
    }
  })
}

watch(
  () => props.modelValue,
  () => {
    queryParams.value = props.modelValue
  },
  {
    deep: true,
    immediate: true
  }
)

watch(()=>props.expandKeys,()=>{
  expandedKeys.value = props.expandKeys
},{
  deep:true,
  immediate:true
})
</script>
<style scoped lang="scss">
:deep(.el-table__header-wrapper) {
  thead {
    .el-table__cell {
      background: #f7f7fb;

      .cell {
        color: #524e74 !important;
        font-weight: normal;
      }

      &:nth-of-type(1) {
        border-radius: 8px 0 0 8px;
      }

      &:nth-last-of-type(1) {
        border-radius: 0 8px 8px 0;
      }
    }
  }
}
</style>
